<template>
    <div>
        <div class="container">
            <span class="more">更多 <a-icon type="right-circle" /></span>
            <p class="nameTi">{{title}}</p>
            <div class="mmmm">
                <div v-for="(item,index) in list" class="imnh" :key="index" @click="changeUrl(item.courseId)">
                    <div class="box">
                        <img :src="item.coverFileUrl" alt="">
                    </div>
                    <p>{{item.courseTitle}}</p>
                    <p>共{{item.participationsCount}}节课 | <span>{{item.learningNum}}</span>报名</p>
                    <p v-if="item.isFree==1" class="free"><span>免费</span></p>
                    <div v-else class="fumoney"><span>{{item.payPrice}}</span><del>{{item.coursePrice}}</del><p>{{item.discountDesc}}</p></div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>

    import axios from "axios"
    export default {
        name: "course",
        props: ["title", "kind", "pageSize"],
        data() {
            return {
                list: [],
            }
        },

        created() {
            const parmas = new URLSearchParams();
            parmas.append("type", this.kind);
            parmas.append("pageNum", 1);
            parmas.append("pageSize", this.pageSize);
            axios.post("http://59.111.104.104:8086/weChat/applet/course/list/type", parmas
            ).then(res => {
                // console.log(res);
                this.list = res.data.rows;
                // console.log(this.list);
            })
        },
        methods:{
            changeUrl(id){
                this.$store.commit("change");
                this.$router.push("/index22?courseId="+id);

            }
        }
    }
</script>

<style lang="less" scoped>
    *{
        padding: 0;
        margin: 0;
    }
    .container {
        width: 1200px;
        margin: 40px auto;
    }
    .more {
        float: right;
    }
    .nameTi {
        text-align: center;
        font-size: 20px;
        border-bottom: 3px solid #eaeaea;
    }
    .imnh .box{
        width: 234px;
       height: 123px;
        margin: 0 auto;
        overflow: hidden;
    }
    .imnh img {
        width: 226px;
        height: 123px;
        transition: all 1s;

    }
    .imnh img:hover{
        transform: scale(1.05,1.05);
        transform-origin: center;
    }
    .imnh {
        width: 20%;
        padding-top: 10px;
        font-size: 12px;
    }
    .imnh p{
        height: 20px;
        line-height: 20px;
    }
    .mmmm {
        display: flex;
        flex-wrap: wrap;
        /*float: left;*/
    }
    .free {
        font-size: 16px;
        color: #42b983;
    }
    .fumoney {
        span {
            margin-right: 10px;
            color: red;
            font-size: 16px;
        }
        p {
            float: right;
            width: 66px;
            height: 20px;
            margin-right: 16px;
            text-align: center;
            background-color: #efe2c8;
            border: 1px solid #f3d7a4;
        }
    }
</style>